import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { View, Image, Text } from '@tarojs/components';
import Taro, { useRouter } from '@tarojs/taro';
import yes from '@/mainSubPack/images/customer/yes.svg';
import no from '@/mainSubPack/images/customer/no.svg';
import './index.scss';

const CustomerServiceArticle = ({ dispatch, article = {}, adjustList = [] }) => {
  const [attitude, setAttitude] = useState(null);
  let { params: { id } = {} } = useRouter();

  const handleAttitude = (value) => {
    if (attitude) {
      Taro.showToast({
        title: '不能重复提交~',
        duration: 2000,
        icon: 'none',
      });
    } else {
      let type = 0;
      setAttitude(value);
      if (value == 'yes') {
        type = 1;
      } else {
        type = 0;
      }
      dispatch({
        type: 'otherApi/customerServiceMark',
        payload: { id, type },
      });
    }
  };

  const getArticleDetail = () => {
    dispatch({
      type: 'otherApi/getCustomerServiceArticle',
      payload: { id },
    });
  };

  const getArticleAdjust = () => {
    dispatch({
      type: 'otherApi/getCustomerServiceAdjust',
      payload: { id },
    });
  };

  const handleArt = (value) => {
    Taro.redirectTo({ url: '/mainSubPack/customerServiceArticle/index?id=' + value });
  };

  useEffect(() => {
    getArticleDetail();
    getArticleAdjust();
  }, [id]);

  const filterRichTextContent = (content) => {
    if (!content) return '';
    let theContent = '<div>' + content + '</div>';
    return theContent.toString().replace(/\<img\s+/gi, `<img mode="widthFix" `);
  };

  return (
    <View className="customerServiceArticle">
      <View className="articleDetail">
        <View className="title">{article.name}</View>
        <View
          className="articlecontent"
          dangerouslySetInnerHTML={{
            __html: filterRichTextContent(article.content),
          }}
        ></View>
        <View className="flex-row-center-center fg">
          <View className="diliver"></View>
          <View className="text">以上方案是否解决了您的问题？</View>
          <View className="diliver"></View>
        </View>
        <View className="flex-row-center ops">
          <View
            className={
              'flex-row-center-center btn ' +
              (attitude == 'yes' ? 'customePageStyle customePageBorderStyle' : '')
            }
            onClick={() => handleAttitude('yes')}
          >
            <Image className="img" src={yes} />
            <Text>已解决</Text>
          </View>
          <View
            className={
              'flex-row-center-center btn ml120 ' +
              (attitude == 'no' ? 'customePageStyle customePageBorderStyle' : '')
            }
            onClick={() => handleAttitude('no')}
          >
            <Image className="img" src={no} />
            <Text>未解决</Text>
          </View>
        </View>
        <View className="flex-row-center-center tip">
          <Text className="tg">没有解决您的问题？</Text>
          <Text className="tb customePageStyle">联系客服</Text>
        </View>
      </View>
      <View className="adjust">
        <View className="title">相关推荐</View>
        <View className="list">
          {adjustList.length > 0 &&
            adjustList.map((ad) => (
              <View className="artname" onClick={() => handleArt(ad.id)} key={ad.id}>
                {ad.name}
              </View>
            ))}
        </View>
      </View>
    </View>
  );
};

export default connect(({ otherApi }) => ({
  article: otherApi.customerServiceArticle,
  adjustList: otherApi.customerServiceAdjust,
}))(CustomerServiceArticle);
